<template>
  <div class="commodity">
    <!-- 头部标题 -->
    <div class="head_tit">
      <img @click="returns" class="tit_fl_img" src="../assets/img/back@2x.png" alt />
      <span>业务留言</span>
    </div>
    <!-- 头部背景图  -->
    <div class="head_banner"></div>
    <!-- 信息提交 -->
    <div class="info_sub">
      <h2 class="info_sub_tit">信息提交 </h2>
      <!-- 选择区域 -->
      <div class="select_list">
        <van-radio-group v-model="radio" direction="horizontal" @change="changeRadio">
          <van-radio checked-color="#07c160" name="1" icon-size="20px">涨粉</van-radio>
          <van-radio checked-color="#07c160" name="2" icon-size="20px">视频定制</van-radio>
          <van-radio checked-color="#07c160" name="3" icon-size="20px">其他</van-radio>
        </van-radio-group>
        <!-- <div class="select_item">
          <span>涨粉</span>
        </div>
        <div class="select_item">
          <span>视频定制</span>
        </div>
        <div class="select_item">
          <span>其他</span>
        </div>-->
      </div>
      <!-- 信息申请列表 -->
      <ul class="sub_list">
        <li class="sub_item" v-show="radio == 1">
          <span>申请数量</span>
          <input type="text" v-model="num" placeholder="数量填写" />
        </li>

        <li class="sub_item">
          <span>联系电话</span>
          <input type="text" maxlength="11" @input="inputPhone" v-model="tel" placeholder="输入您的电话" />
        </li>

        <li class="sub_item">
          <span>联系微信</span>
          <input type="text" v-model="wechat" placeholder="输入您的微信号" />
        </li>

        <li class="sub_item" v-show="radio == 1">
          <span>抖音账号</span>
          <input type="text" v-model="tok" placeholder="输入您的抖音号" />
        </li>

        <li class="sub_item">
          <span>备注</span>
          <textarea
            v-model="content"
            class="item_textarea"
            name
            id
            cols="30"
            rows="10"
            placeholder="备注信息"
          ></textarea>
        </li>
      </ul>
      <!-- 提交按钮 -->
      <div class="btn_sub">
        <span @click="btnSubmits">确认提交</span>
        <span @click="$router.push({path:'/idiomList'})">更多</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getLeaveMessage } from "../api/leaveMsg";
export default {
  components: {},
  name: "LeaveMsg",
  data() {
    return {
      num: "",
      tel: "",
      wechat: "",
      tok: "",
      content: "",
      radio: '1'
    };
  },
  methods: {
    // 前往搜索页面
    goSearch() {
      this.$router.push({ name: "Search" });
    },
    // 点击返回上一页
    returns() {
      this.$router.go(-1);
    },
    // 点击发送表单
    btnSubmits() {
      let info = {
        user_tel: this.tel,
        wechat: this.wechat,
        tik_tok: this.tok,
        number: this.num,
        content: this.content,
        type: this.radio
      }; 
      getLeaveMessage(info).then((res) => {
        if (res.code == 200) {
          (this.num = ""),
            (this.tel = ""),
            (this.wechat = ""),
            (this.tok = ""),
            (this.content = ""), 
            this.$toast({
              duration: "2000",
              message: res.msg,
            });
          // 延迟一秒跳转到首页
          setTimeout(() => {
            this.$router.push("/idiomList");
          }, 1000);
        } else {
          this.$toast({
            duration: "2000",
            message: res.msg,
          });
        }
      });
    },
    //input事件处理
    inputPhone(e) {
      this.phoneerrmsg = ""; //验证输入的提示信息
      let filtered = e.target.value.replace(/^0|[^\d]/g, "");
      if (this.tel != filtered) {
        this.tel = filtered;
      }
    },
    // 单选事件
    changeRadio(name){
      // console.log(name);
    }
  },
};
</script>

<style lang="less" scoped>
.commodity {
  margin: 0 0.373333rem;
}

.head_tit {
  position: relative;
  text-align: center;
  color: #fff;
  font-weight: 700;
  height: 1.333333rem;
  line-height: 1.333333rem;
  font-size: 0.453333rem;
  z-index: 10;
  .tit_fl {
    position: absolute;
    right: 0;
    top: 0.266667rem;
    width: 0.706667rem;
    height: 0.706667rem;
    background: #eaeaea;
    border-radius: 50%;
    .tit_fr_img {
      position: relative;
      top: -0.32rem;
      width: 0.386667rem;
      height: 0.386667rem;
    }
  }
  .tit_fl_img {
    position: absolute;
    top: 0.4rem;
    left: 0;
    width: 0.266667rem;
  }
}
.head_banner {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6.666667rem;
  background: url("../assets/myImg/bg@2x.png") no-repeat;
  background-size: 100% 100%;
}
// 信息提交
.info_sub {
  padding: 0.666667rem 0.4rem;
  margin: 0 0.266667rem;
  position: relative;
  height: 14.666667rem;
  background: #fff;
  border-radius: 0.48rem;

  .info_sub_tit {
    margin-bottom: 0.8rem;
    text-align: center;
    font-weight: 700;
    color: #647cfa;
    font-size: 0.48rem;
  }
  // 选择区域
  .select_list {
    display: flex;
    height: 1.066667rem; 
  }
  .sub_list {
    .sub_item {
      display: flex;
      justify-content: space-between;
      font-size: 0.4rem;
      color: #333;
      height: 1.333333rem;
      line-height: 1.333333rem;
      border-bottom: 0.013333rem solid #dcdcdc;
      input {
        margin: 0.266667rem 0;
        font-size: 0.4rem;
      }
    }
    & .sub_item:last-child {
      display: inline-grid;
      height: auto;
      .item_textarea {
        font-size: 0.346667rem;
        padding: 0.266667rem;
        width: 7.866667rem;
        height: 2.266667rem;
        background: #e6e6e6;
        border: none;
        border-radius: 0.133333rem;
      }
    }
  }
}

.btn_sub {
  margin-top: 0.533333rem;
  display: flex;
  justify-content: space-between;
  width: 8.266667rem;
  & span:nth-child(1) {
    display: block;
    width: 5.08rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    color: #fff;
    font-size: 0.4rem;
    background: #647cfa;
    border-radius: 0.6rem;
  }
  & span:nth-child(2) {
    display: block;
    width: 3rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    color: #fff;
    font-size: 0.4rem;
    background: #ff6801;
    border-radius: 0.6rem;
  }
}
 
</style>